<%-- 
    Document   : addFood
    Created on : Feb 24, 2013, 6:00:57 PM
    Author     : WIN7
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta charset=utf-8>
        <meta name="viewport" content="width=620">
        <title>Upload Image</title>
        <script src="js/addFoodJs.js"></script>
    </head>
    <style>
        #holder { border: 10px dashed #ccc; width: 300px; min-height: 300px; margin: 20px auto;}
        #holder.hover { border: 10px dashed #0c0; }
        #holder img { display: block; margin: 10px auto; }
        #holder p { margin: 10px; font-size: 14px; }
        progress { width: 100%; }
        progress:after { content: '%'; }
        .fail { background: #c00; padding: 2px; color: #fff; }
        .hidden { display: none !important;}
    </style>

    <body>

        <hr/>
        <fieldset>
            <legend>Upload File</legend>
            <form action="UploadFileServlet" name="testform" enctype="multipart/form-data" method="POST" >
                <p>Drag an image from your desktop</p>
                <input type="file" name="fileUp" value=""  /><br/><br/>
                <div id="holder">
                </div> 

                <input type="submit" value="Upload" name="btAction" />
                <div id="msg">${requestScope.msg}</div>
            </form>

        </fieldset>
    </body>
</html>
